<template>
    <div class="reply-input-warp">
        <el-input
            v-model.trim="comment"
            maxlength="500"
            :placeholder="placeholder"
            show-word-limit
            type="textarea"
            resize="none"
            class="text-input"
        />
        <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36 reply-btn" plain :disabled="!comment" :loading="loading" @click="submit">回复</el-button>
    </div>
</template>

<script setup>
import { defineComponent, toRefs,ref, reactive, toRef, computed, onMounted, watch } from "vue"
import { queryToJson } from '@/lib/tools';
import { useRoute } from 'vue-router';

const route = useRoute();

const props = defineProps({
    parentData: {
        default: () => ({}),
        type: Object
    },
    placeholder: {
        default: '写下你的评论...',
        type: String
    },
    visible: {
        default: false,
        type: Boolean
    },
    isPreview: {
        default: false,
        type: Boolean
    }
})

const emit = defineEmits(['update:list'])

const comment = ref('')
const loading = ref(false)

watch(() => props.visible, (val) => {
    if(val){
        comment.value = ''
    }
})

// 发表评价 预览状态下不能发表评价
function submit () {
    if (props.isPreview) {
        G_dispatchEvent('toast', { message: '预览状态下不可操作', type: 'error'});
        return
    }
    if (!!comment.value && !!comment.value.trim() && comment.value.trim().length >= 2) {
        let catalogueId = queryToJson().catalogueId;
        let params = {
            content: comment.value,
            bizId: catalogueId,
            parentSource: route.params.moocId,
            bizSource: 'mooc',
            serviceName: 'kms-center',

            commentLevel: props.parentData.commentLevel != 2 ? 2 : 3, // 层级(1:一级评论, 2:二级评论 n:n级评论）
            parentCommentId: props.parentData.id, // 父级评论ID 一级评论传0
            top: 0, // 是否置顶 0：否 1：是
            parentCommentAnonymous: 0, // 被回复的评论是否匿名 1-匿名 0-实名 
            beReplyUserId: props.parentData.userId, // 被回复的人的ID
            anonymous: 0, // 匿名 1-匿名 0-实名
            topParentCommentId: props.parentData.id
        }
        loading.value = true;
        G_transmit('saveCatalogueComment', {
            data: params
        }).then((res) => {
            comment.value = '';
            G_dispatchEvent('toast', { message: '发表成功', type: 'success'});
            emit('update:list', 'add');
        }).catch(_err => {
            console.log(_err);
        }).finally(() => {
            loading.value = false;
        })
    } else {
        G_dispatchEvent('toast', { message: '请输入正确的讨论内容，至少2个字', type: 'error'});
    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.reply-input-warp{
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    :deep(.text-input){
        width:100%;
        min-height: 64px !important;
        margin-bottom: 15px;
        .el-textarea__inner{
            width: 100%;
            min-height: 64px !important;
            background: #F7F9FA;
            border-radius: 4px;
        }
        textarea::-webkit-input-placeholder{
            // margin: 10px 0 0 14px;
            font-size: 14px;
            color: #999999;
        }
    }
    .reply-btn{
        margin-bottom: 20px;
    }
}
 
</style>
